<script lang="ts">
  interface TimelineItem {
    time: string;
    content: string;
    operator?: string;
  }

  export let items: TimelineItem[] = [];
  export let height: string = '480px';
</script>

<div class="timeline relative overflow-x-hidden overflow-y-auto" style="height: {height}">
  {#each items as item, index}
    <div class="timeline-item flex relative px-1">
      <!-- 左侧时间线 -->
      <div
        class="timeline-line absolute left-4 top-0 bottom-0 w-[1px] border-l border-dashed border-cyan-400"
        style="height: {index === items.length - 1 ? '24px' : '100%'}"
      ></div>

      <!-- 圆点 -->
      <div class="relative z-10 flex-shrink-0">
        <img
          src="/dp/dian@2x.png"
          alt="timeline-dot"
          class="w-6 h-6 timeline-dot"
        />
      </div>

      <!-- 右侧内容 -->
      <div class="timeline-content  px-6 py-4 w-[calc(100%-48px)] ml-4 mb-4 bg-[rgba(26,109,195,0.15)] rounded">
        <div class="time text-cyan-400 text-sm mb-1">{item.time}</div>
        <div class="content text-white">{item.content}</div>
        {#if item.operator}
          <div class="operator text-white text-sm mt-1">{item.operator}</div>
        {/if}
      </div>
    </div>
  {/each}
</div>

<style scoped>
  .timeline {
    padding: 12px 0;
  }

  @keyframes scale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  .timeline-dot {
    animation: scale 2s ease-out infinite;
  }


    /* 滚动条整体样式 */
    ::-webkit-scrollbar {
    width: 8px;  /* 更窄的滚动条 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: rgba(13, 25, 48, 0.8);  /* 深蓝色背景 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: rgba(30,137,254,0.5);  /* 亮蓝色滑块 */
    border-radius: 2px;
  }

  /* 鼠标悬浮在滑块上时 */
  ::-webkit-scrollbar-thumb:hover {
    background: #1976D2;  /* 稍深的蓝色 */
  }

  /* Firefox 兼容性 */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(30,137,254,0.5) rgba(13, 25, 48, 0.8);
  }
</style>
